<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <style>
    ul, li {
      margin: 0;
      padding: 0;
    }
    li {
      list-style: none;
    }
    .container {
      padding: 20px 50px;
      min-width: 1200px;
      overflow: hidden;
    }
    .section {
      clear: both;
      margin-bottom: 40px;
    }
    .container h2 {
      font-size: 18px;
      color: #333;
      padding: 10px;
      border-bottom: 1px solid #eee;
    }
    .container h2 span{
      font-size: 18px;
      color: #999999;
    }
    .icon-list {
      overflow: hidden;
    }
    .icon-item {
      float: left;
      margin: 0 10px 10px 0;
      width: 64px;
    }
    .section p {
      font-size: 14px;
      color: #666;
    }
    .icon-wrapper {
      width: 64px;
      height: 64px;
      line-height: 64px;
      text-align: center;
      background: #fafafa;
      border-radius: 2px;
      font-size: 29px;
      display: block;
      overflow: hidden;
    }
    .icon-text {
      font-size: 12px;
      display: block;
      text-align: center;
      margin-top: 5px;
      width: 64px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
  <title>iconcool</title>
</head>
<body>
  <div class="container">
    <h2>iconcool</h2>

    <section class="section">
      <ul class="icon-list">
        <li class="icon-item" title="alarm-error">
          <span class="icon-wrapper bk-icon icon-alarm-error"></span>
          <span class="icon-text">alarm-error</span>
        </li>
        <li class="icon-item" title="alarm-insufficient">
          <span class="icon-wrapper bk-icon icon-alarm-insufficient"></span>
          <span class="icon-text">alarm-insufficient</span>
        </li>
        <li class="icon-item" title="alarm-normal">
          <span class="icon-wrapper bk-icon icon-alarm-normal"></span>
          <span class="icon-text">alarm-normal</span>
        </li>
        <li class="icon-item" title="angle-double-down">
          <span class="icon-wrapper bk-icon icon-angle-double-down"></span>
          <span class="icon-text">angle-double-down</span>
        </li>
        <li class="icon-item" title="angle-double-left">
          <span class="icon-wrapper bk-icon icon-angle-double-left"></span>
          <span class="icon-text">angle-double-left</span>
        </li>
        <li class="icon-item" title="angle-double-up">
          <span class="icon-wrapper bk-icon icon-angle-double-up"></span>
          <span class="icon-text">angle-double-up</span>
        </li>
        <li class="icon-item" title="angle-double-right">
          <span class="icon-wrapper bk-icon icon-angle-double-right"></span>
          <span class="icon-text">angle-double-right</span>
        </li>
        <li class="icon-item" title="angle-down">
          <span class="icon-wrapper bk-icon icon-angle-down"></span>
          <span class="icon-text">angle-down</span>
        </li>
        <li class="icon-item" title="angle-left">
          <span class="icon-wrapper bk-icon icon-angle-left"></span>
          <span class="icon-text">angle-left</span>
        </li>
        <li class="icon-item" title="angle-right">
          <span class="icon-wrapper bk-icon icon-angle-right"></span>
          <span class="icon-text">angle-right</span>
        </li>
        <li class="icon-item" title="angle-up">
          <span class="icon-wrapper bk-icon icon-angle-up"></span>
          <span class="icon-text">angle-up</span>
        </li>
        <li class="icon-item" title="apply-join-project">
          <span class="icon-wrapper bk-icon icon-apply-join-project"></span>
          <span class="icon-text">apply-join-project</span>
        </li>
        <li class="icon-item" title="apply-perm">
          <span class="icon-wrapper bk-icon icon-apply-perm"></span>
          <span class="icon-text">apply-perm</span>
        </li>
        <li class="icon-item" title="apply-record">
          <span class="icon-wrapper bk-icon icon-apply-record"></span>
          <span class="icon-text">apply-record</span>
        </li>
        <li class="icon-item" title="apps-shape">
          <span class="icon-wrapper bk-icon icon-apps-shape"></span>
          <span class="icon-text">apps-shape</span>
        </li>
        <li class="icon-item" title="apps">
          <span class="icon-wrapper bk-icon icon-apps"></span>
          <span class="icon-text">apps</span>
        </li>
        <li class="icon-item" title="area-chart">
          <span class="icon-wrapper bk-icon icon-area-chart"></span>
          <span class="icon-text">area-chart</span>
        </li>
        <li class="icon-item" title="arrows-down-circle-shape">
          <span class="icon-wrapper bk-icon icon-arrows-down-circle-shape"></span>
          <span class="icon-text">arrows-down-circle-shape</span>
        </li>
        <li class="icon-item" title="arrows-down-circle">
          <span class="icon-wrapper bk-icon icon-arrows-down-circle"></span>
          <span class="icon-text">arrows-down-circle</span>
        </li>
        <li class="icon-item" title="arrows-down-shape">
          <span class="icon-wrapper bk-icon icon-arrows-down-shape"></span>
          <span class="icon-text">arrows-down-shape</span>
        </li>
        <li class="icon-item" title="arrows-down">
          <span class="icon-wrapper bk-icon icon-arrows-down"></span>
          <span class="icon-text">arrows-down</span>
        </li>
        <li class="icon-item" title="arrows-left-circle-shape">
          <span class="icon-wrapper bk-icon icon-arrows-left-circle-shape"></span>
          <span class="icon-text">arrows-left-circle-shape</span>
        </li>
        <li class="icon-item" title="arrows-left-shape">
          <span class="icon-wrapper bk-icon icon-arrows-left-shape"></span>
          <span class="icon-text">arrows-left-shape</span>
        </li>
        <li class="icon-item" title="arrows-left-circle">
          <span class="icon-wrapper bk-icon icon-arrows-left-circle"></span>
          <span class="icon-text">arrows-left-circle</span>
        </li>
        <li class="icon-item" title="arrows-left">
          <span class="icon-wrapper bk-icon icon-arrows-left"></span>
          <span class="icon-text">arrows-left</span>
        </li>
        <li class="icon-item" title="arrows-m-down-shape">
          <span class="icon-wrapper bk-icon icon-arrows-m-down-shape"></span>
          <span class="icon-text">arrows-m-down-shape</span>
        </li>
        <li class="icon-item" title="arrows-m-left-shape">
          <span class="icon-wrapper bk-icon icon-arrows-m-left-shape"></span>
          <span class="icon-text">arrows-m-left-shape</span>
        </li>
        <li class="icon-item" title="arrows-m-right-shape">
          <span class="icon-wrapper bk-icon icon-arrows-m-right-shape"></span>
          <span class="icon-text">arrows-m-right-shape</span>
        </li>
        <li class="icon-item" title="arrows-m-up-shape">
          <span class="icon-wrapper bk-icon icon-arrows-m-up-shape"></span>
          <span class="icon-text">arrows-m-up-shape</span>
        </li>
        <li class="icon-item" title="arrows-right-circle-shape">
          <span class="icon-wrapper bk-icon icon-arrows-right-circle-shape"></span>
          <span class="icon-text">arrows-right-circle-shape</span>
        </li>
        <li class="icon-item" title="arrows-right-circle">
          <span class="icon-wrapper bk-icon icon-arrows-right-circle"></span>
          <span class="icon-text">arrows-right-circle</span>
        </li>
        <li class="icon-item" title="arrows-right-shape">
          <span class="icon-wrapper bk-icon icon-arrows-right-shape"></span>
          <span class="icon-text">arrows-right-shape</span>
        </li>
        <li class="icon-item" title="arrows-right">
          <span class="icon-wrapper bk-icon icon-arrows-right"></span>
          <span class="icon-text">arrows-right</span>
        </li>
        <li class="icon-item" title="arrows-up-circle-shape">
          <span class="icon-wrapper bk-icon icon-arrows-up-circle-shape"></span>
          <span class="icon-text">arrows-up-circle-shape</span>
        </li>
        <li class="icon-item" title="arrows-up-circle">
          <span class="icon-wrapper bk-icon icon-arrows-up-circle"></span>
          <span class="icon-text">arrows-up-circle</span>
        </li>
        <li class="icon-item" title="arrows-up-shape">
          <span class="icon-wrapper bk-icon icon-arrows-up-shape"></span>
          <span class="icon-text">arrows-up-shape</span>
        </li>
        <li class="icon-item" title="arrows-up">
          <span class="icon-wrapper bk-icon icon-arrows-up"></span>
          <span class="icon-text">arrows-up</span>
        </li>
        <li class="icon-item" title="back-shape">
          <span class="icon-wrapper bk-icon icon-back-shape"></span>
          <span class="icon-text">back-shape</span>
        </li>
        <li class="icon-item" title="back">
          <span class="icon-wrapper bk-icon icon-back"></span>
          <span class="icon-text">back</span>
        </li>
        <li class="icon-item" title="back2">
          <span class="icon-wrapper bk-icon icon-back2"></span>
          <span class="icon-text">back2</span>
        </li>
        <li class="icon-item" title="bar-chart">
          <span class="icon-wrapper bk-icon icon-bar-chart"></span>
          <span class="icon-text">bar-chart</span>
        </li>
        <li class="icon-item" title="bk">
          <span class="icon-wrapper bk-icon icon-bk"></span>
          <span class="icon-text">bk</span>
        </li>
        <li class="icon-item" title="block-shape">
          <span class="icon-wrapper bk-icon icon-block-shape"></span>
          <span class="icon-text">block-shape</span>
        </li>
        <li class="icon-item" title="calendar-shape">
          <span class="icon-wrapper bk-icon icon-calendar-shape"></span>
          <span class="icon-text">calendar-shape</span>
        </li>
        <li class="icon-item" title="calendar">
          <span class="icon-wrapper bk-icon icon-calendar"></span>
          <span class="icon-text">calendar</span>
        </li>
        <li class="icon-item" title="chain">
          <span class="icon-wrapper bk-icon icon-chain"></span>
          <span class="icon-text">chain</span>
        </li>
        <li class="icon-item" title="check-1">
          <span class="icon-wrapper bk-icon icon-check-1"></span>
          <span class="icon-text">check-1</span>
        </li>
        <li class="icon-item" title="check-circle-shape">
          <span class="icon-wrapper bk-icon icon-check-circle-shape"></span>
          <span class="icon-text">check-circle-shape</span>
        </li>
        <li class="icon-item" title="check-circle">
          <span class="icon-wrapper bk-icon icon-check-circle"></span>
          <span class="icon-text">check-circle</span>
        </li>
        <li class="icon-item" title="circle-4-1">
          <span class="icon-wrapper bk-icon icon-circle-4-1"></span>
          <span class="icon-text">circle-4-1</span>
        </li>
        <li class="icon-item" title="circle-2-1">
          <span class="icon-wrapper bk-icon icon-circle-2-1"></span>
          <span class="icon-text">circle-2-1</span>
        </li>
        <li class="icon-item" title="circle-shape">
          <span class="icon-wrapper bk-icon icon-circle-shape"></span>
          <span class="icon-text">circle-shape</span>
        </li>
        <li class="icon-item" title="circle">
          <span class="icon-wrapper bk-icon icon-circle"></span>
          <span class="icon-text">circle</span>
        </li>
        <li class="icon-item" title="clipboard-shape">
          <span class="icon-wrapper bk-icon icon-clipboard-shape"></span>
          <span class="icon-text">clipboard-shape</span>
        </li>
        <li class="icon-item" title="ck-store">
          <span class="icon-wrapper bk-icon icon-ck-store"></span>
          <span class="icon-text">ck-store</span>
        </li>
        <li class="icon-item" title="clipboard">
          <span class="icon-wrapper bk-icon icon-clipboard"></span>
          <span class="icon-text">clipboard</span>
        </li>
        <li class="icon-item" title="clock-shape">
          <span class="icon-wrapper bk-icon icon-clock-shape"></span>
          <span class="icon-text">clock-shape</span>
        </li>
        <li class="icon-item" title="clock">
          <span class="icon-wrapper bk-icon icon-clock"></span>
          <span class="icon-text">clock</span>
        </li>
        <li class="icon-item" title="close-circle-shape">
          <span class="icon-wrapper bk-icon icon-close-circle-shape"></span>
          <span class="icon-text">close-circle-shape</span>
        </li>
        <li class="icon-item" title="close-circle">
          <span class="icon-wrapper bk-icon icon-close-circle"></span>
          <span class="icon-text">close-circle</span>
        </li>
        <li class="icon-item" title="close">
          <span class="icon-wrapper bk-icon icon-close"></span>
          <span class="icon-text">close</span>
        </li>
        <li class="icon-item" title="close3-shape">
          <span class="icon-wrapper bk-icon icon-close3-shape"></span>
          <span class="icon-text">close3-shape</span>
        </li>
        <li class="icon-item" title="code">
          <span class="icon-wrapper bk-icon icon-code"></span>
          <span class="icon-text">code</span>
        </li>
        <li class="icon-item" title="cog-shape">
          <span class="icon-wrapper bk-icon icon-cog-shape"></span>
          <span class="icon-text">cog-shape</span>
        </li>
        <li class="icon-item" title="control-center">
          <span class="icon-wrapper bk-icon icon-control-center"></span>
          <span class="icon-text">control-center</span>
        </li>
        <li class="icon-item" title="cog">
          <span class="icon-wrapper bk-icon icon-cog"></span>
          <span class="icon-text">cog</span>
        </li>
        <li class="icon-item" title="cry">
          <span class="icon-wrapper bk-icon icon-cry"></span>
          <span class="icon-text">cry</span>
        </li>
        <li class="icon-item" title="cry-shape">
          <span class="icon-wrapper bk-icon icon-cry-shape"></span>
          <span class="icon-text">cry-shape</span>
        </li>
        <li class="icon-item" title="dashboard-2-shape">
          <span class="icon-wrapper bk-icon icon-dashboard-2-shape"></span>
          <span class="icon-text">dashboard-2-shape</span>
        </li>
        <li class="icon-item" title="dashboard-2">
          <span class="icon-wrapper bk-icon icon-dashboard-2"></span>
          <span class="icon-text">dashboard-2</span>
        </li>
        <li class="icon-item" title="dashboard-shape">
          <span class="icon-wrapper bk-icon icon-dashboard-shape"></span>
          <span class="icon-text">dashboard-shape</span>
        </li>
        <li class="icon-item" title="dashboard">
          <span class="icon-wrapper bk-icon icon-dashboard"></span>
          <span class="icon-text">dashboard</span>
        </li>
        <li class="icon-item" title="data-shape">
          <span class="icon-wrapper bk-icon icon-data-shape"></span>
          <span class="icon-text">data-shape</span>
        </li>
        <li class="icon-item" title="data">
          <span class="icon-wrapper bk-icon icon-data"></span>
          <span class="icon-text">data</span>
        </li>
        <li class="icon-item" title="data2-shape">
          <span class="icon-wrapper bk-icon icon-data2-shape"></span>
          <span class="icon-text">data2-shape</span>
        </li>
        <li class="icon-item" title="data2">
          <span class="icon-wrapper bk-icon icon-data2"></span>
          <span class="icon-text">data2</span>
        </li>
        <li class="icon-item" title="dedent">
          <span class="icon-wrapper bk-icon icon-dedent"></span>
          <span class="icon-text">dedent</span>
        </li>
        <li class="icon-item" title="delete">
          <span class="icon-wrapper bk-icon icon-delete"></span>
          <span class="icon-text">delete</span>
        </li>
        <li class="icon-item" title="dialogue-empty-shape">
          <span class="icon-wrapper bk-icon icon-dialogue-empty-shape"></span>
          <span class="icon-text">dialogue-empty-shape</span>
        </li>
        <li class="icon-item" title="dialogue-empty">
          <span class="icon-wrapper bk-icon icon-dialogue-empty"></span>
          <span class="icon-text">dialogue-empty</span>
        </li>
        <li class="icon-item" title="dialogue">
          <span class="icon-wrapper bk-icon icon-dialogue"></span>
          <span class="icon-text">dialogue</span>
        </li>
        <li class="icon-item" title="dialogue-shape">
          <span class="icon-wrapper bk-icon icon-dialogue-shape"></span>
          <span class="icon-text">dialogue-shape</span>
        </li>
        <li class="icon-item" title="dispirited">
          <span class="icon-wrapper bk-icon icon-dispirited"></span>
          <span class="icon-text">dispirited</span>
        </li>
        <li class="icon-item" title="dispirited-shape">
          <span class="icon-wrapper bk-icon icon-dispirited-shape"></span>
          <span class="icon-text">dispirited-shape</span>
        </li>
        <li class="icon-item" title="docker">
          <span class="icon-wrapper bk-icon icon-docker"></span>
          <span class="icon-text">docker</span>
        </li>
        <li class="icon-item" title="down-shape">
          <span class="icon-wrapper bk-icon icon-down-shape"></span>
          <span class="icon-text">down-shape</span>
        </li>
        <li class="icon-item" title="download">
          <span class="icon-wrapper bk-icon icon-download"></span>
          <span class="icon-text">download</span>
        </li>
        <li class="icon-item" title="edit">
          <span class="icon-wrapper bk-icon icon-edit"></span>
          <span class="icon-text">edit</span>
        </li>
        <li class="icon-item" title="ellipsis">
          <span class="icon-wrapper bk-icon icon-ellipsis"></span>
          <span class="icon-text">ellipsis</span>
        </li>
        <li class="icon-item" title="edit2">
          <span class="icon-wrapper bk-icon icon-edit2"></span>
          <span class="icon-text">edit2</span>
        </li>
        <li class="icon-item" title="email-shape">
          <span class="icon-wrapper bk-icon icon-email-shape"></span>
          <span class="icon-text">email-shape</span>
        </li>
        <li class="icon-item" title="email">
          <span class="icon-wrapper bk-icon icon-email"></span>
          <span class="icon-text">email</span>
        </li>
        <li class="icon-item" title="empty-shape">
          <span class="icon-wrapper bk-icon icon-empty-shape"></span>
          <span class="icon-text">empty-shape</span>
        </li>
        <li class="icon-item" title="empty">
          <span class="icon-wrapper bk-icon icon-empty"></span>
          <span class="icon-text">empty</span>
        </li>
        <li class="icon-item" title="end">
          <span class="icon-wrapper bk-icon icon-end"></span>
          <span class="icon-text">end</span>
        </li>
        <li class="icon-item" title="event-query">
          <span class="icon-wrapper bk-icon icon-event-query"></span>
          <span class="icon-text">event-query</span>
        </li>
        <li class="icon-item" title="exclamation-circle">
          <span class="icon-wrapper bk-icon icon-exclamation-circle"></span>
          <span class="icon-text">exclamation-circle</span>
        </li>
        <li class="icon-item" title="exclamation-circle-shape">
          <span class="icon-wrapper bk-icon icon-exclamation-circle-shape"></span>
          <span class="icon-text">exclamation-circle-shape</span>
        </li>
        <li class="icon-item" title="exclamation-triangle-shape">
          <span class="icon-wrapper bk-icon icon-exclamation-triangle-shape"></span>
          <span class="icon-text">exclamation-triangle-shape</span>
        </li>
        <li class="icon-item" title="exclamation-triangle">
          <span class="icon-wrapper bk-icon icon-exclamation-triangle"></span>
          <span class="icon-text">exclamation-triangle</span>
        </li>
        <li class="icon-item" title="exclamation">
          <span class="icon-wrapper bk-icon icon-exclamation"></span>
          <span class="icon-text">exclamation</span>
        </li>
        <li class="icon-item" title="execute">
          <span class="icon-wrapper bk-icon icon-execute"></span>
          <span class="icon-text">execute</span>
        </li>
        <li class="icon-item" title="eye-shape">
          <span class="icon-wrapper bk-icon icon-eye-shape"></span>
          <span class="icon-text">eye-shape</span>
        </li>
        <li class="icon-item" title="eye-slash-shape">
          <span class="icon-wrapper bk-icon icon-eye-slash-shape"></span>
          <span class="icon-text">eye-slash-shape</span>
        </li>
        <li class="icon-item" title="eye-slash">
          <span class="icon-wrapper bk-icon icon-eye-slash"></span>
          <span class="icon-text">eye-slash</span>
        </li>
        <li class="icon-item" title="eye">
          <span class="icon-wrapper bk-icon icon-eye"></span>
          <span class="icon-text">eye</span>
        </li>
        <li class="icon-item" title="feedback">
          <span class="icon-wrapper bk-icon icon-feedback"></span>
          <span class="icon-text">feedback</span>
        </li>
        <li class="icon-item" title="file-plus-shape">
          <span class="icon-wrapper bk-icon icon-file-plus-shape"></span>
          <span class="icon-text">file-plus-shape</span>
        </li>
        <li class="icon-item" title="file-plus">
          <span class="icon-wrapper bk-icon icon-file-plus"></span>
          <span class="icon-text">file-plus</span>
        </li>
        <li class="icon-item" title="file-shape">
          <span class="icon-wrapper bk-icon icon-file-shape"></span>
          <span class="icon-text">file-shape</span>
        </li>
        <li class="icon-item" title="file">
          <span class="icon-wrapper bk-icon icon-file"></span>
          <span class="icon-text">file</span>
        </li>
        <li class="icon-item" title="folder-open-shape">
          <span class="icon-wrapper bk-icon icon-folder-open-shape"></span>
          <span class="icon-text">folder-open-shape</span>
        </li>
        <li class="icon-item" title="folder-open">
          <span class="icon-wrapper bk-icon icon-folder-open"></span>
          <span class="icon-text">folder-open</span>
        </li>
        <li class="icon-item" title="folder-plus-shape">
          <span class="icon-wrapper bk-icon icon-folder-plus-shape"></span>
          <span class="icon-text">folder-plus-shape</span>
        </li>
        <li class="icon-item" title="folder-plus">
          <span class="icon-wrapper bk-icon icon-folder-plus"></span>
          <span class="icon-text">folder-plus</span>
        </li>
        <li class="icon-item" title="folder">
          <span class="icon-wrapper bk-icon icon-folder"></span>
          <span class="icon-text">folder</span>
        </li>
        <li class="icon-item" title="folder-shape">
          <span class="icon-wrapper bk-icon icon-folder-shape"></span>
          <span class="icon-text">folder-shape</span>
        </li>
        <li class="icon-item" title="heart-shape">
          <span class="icon-wrapper bk-icon icon-heart-shape"></span>
          <span class="icon-text">heart-shape</span>
        </li>
        <li class="icon-item" title="full-screen">
          <span class="icon-wrapper bk-icon icon-full-screen"></span>
          <span class="icon-text">full-screen</span>
        </li>
        <li class="icon-item" title="heart">
          <span class="icon-wrapper bk-icon icon-heart"></span>
          <span class="icon-text">heart</span>
        </li>
        <li class="icon-item" title="helm">
          <span class="icon-wrapper bk-icon icon-helm"></span>
          <span class="icon-text">helm</span>
        </li>
        <li class="icon-item" title="helper">
          <span class="icon-wrapper bk-icon icon-helper"></span>
          <span class="icon-text">helper</span>
        </li>
        <li class="icon-item" title="hide">
          <span class="icon-wrapper bk-icon icon-hide"></span>
          <span class="icon-text">hide</span>
        </li>
        <li class="icon-item" title="home-shape">
          <span class="icon-wrapper bk-icon icon-home-shape"></span>
          <span class="icon-text">home-shape</span>
        </li>
        <li class="icon-item" title="home">
          <span class="icon-wrapper bk-icon icon-home"></span>
          <span class="icon-text">home</span>
        </li>
        <li class="icon-item" title="id-shape">
          <span class="icon-wrapper bk-icon icon-id-shape"></span>
          <span class="icon-text">id-shape</span>
        </li>
        <li class="icon-item" title="image-shape">
          <span class="icon-wrapper bk-icon icon-image-shape"></span>
          <span class="icon-text">image-shape</span>
        </li>
        <li class="icon-item" title="id">
          <span class="icon-wrapper bk-icon icon-id"></span>
          <span class="icon-text">id</span>
        </li>
        <li class="icon-item" title="image">
          <span class="icon-wrapper bk-icon icon-image"></span>
          <span class="icon-text">image</span>
        </li>
        <li class="icon-item" title="indent">
          <span class="icon-wrapper bk-icon icon-indent"></span>
          <span class="icon-text">indent</span>
        </li>
        <li class="icon-item" title="info-circle-shape">
          <span class="icon-wrapper bk-icon icon-info-circle-shape"></span>
          <span class="icon-text">info-circle-shape</span>
        </li>
        <li class="icon-item" title="info-circle">
          <span class="icon-wrapper bk-icon icon-info-circle"></span>
          <span class="icon-text">info-circle</span>
        </li>
        <li class="icon-item" title="info">
          <span class="icon-wrapper bk-icon icon-info"></span>
          <span class="icon-text">info</span>
        </li>
        <li class="icon-item" title="jd-node">
          <span class="icon-wrapper bk-icon icon-jd-node"></span>
          <span class="icon-text">jd-node</span>
        </li>
        <li class="icon-item" title="jq-colony">
          <span class="icon-wrapper bk-icon icon-jq-colony"></span>
          <span class="icon-text">jq-colony</span>
        </li>
        <li class="icon-item" title="key">
          <span class="icon-wrapper bk-icon icon-key"></span>
          <span class="icon-text">key</span>
        </li>
        <li class="icon-item" title="left-shape">
          <span class="icon-wrapper bk-icon icon-left-shape"></span>
          <span class="icon-text">left-shape</span>
        </li>
        <li class="icon-item" title="line-chart">
          <span class="icon-wrapper bk-icon icon-line-chart"></span>
          <span class="icon-text">line-chart</span>
        </li>
        <li class="icon-item" title="lock-shape">
          <span class="icon-wrapper bk-icon icon-lock-shape"></span>
          <span class="icon-text">lock-shape</span>
        </li>
        <li class="icon-item" title="list">
          <span class="icon-wrapper bk-icon icon-list"></span>
          <span class="icon-text">list</span>
        </li>
        <li class="icon-item" title="lock">
          <span class="icon-wrapper bk-icon icon-lock"></span>
          <span class="icon-text">lock</span>
        </li>
        <li class="icon-item" title="manage-center">
          <span class="icon-wrapper bk-icon icon-manage-center"></span>
          <span class="icon-text">manage-center</span>
        </li>
        <li class="icon-item" title="minus-circle-shape">
          <span class="icon-wrapper bk-icon icon-minus-circle-shape"></span>
          <span class="icon-text">minus-circle-shape</span>
        </li>
        <li class="icon-item" title="minus-circle">
          <span class="icon-wrapper bk-icon icon-minus-circle"></span>
          <span class="icon-text">minus-circle</span>
        </li>
        <li class="icon-item" title="minus-square-shape">
          <span class="icon-wrapper bk-icon icon-minus-square-shape"></span>
          <span class="icon-text">minus-square-shape</span>
        </li>
        <li class="icon-item" title="minus-square">
          <span class="icon-wrapper bk-icon icon-minus-square"></span>
          <span class="icon-text">minus-square</span>
        </li>
        <li class="icon-item" title="minus">
          <span class="icon-wrapper bk-icon icon-minus"></span>
          <span class="icon-text">minus</span>
        </li>
        <li class="icon-item" title="mobile">
          <span class="icon-wrapper bk-icon icon-mobile"></span>
          <span class="icon-text">mobile</span>
        </li>
        <li class="icon-item" title="mobile-shape">
          <span class="icon-wrapper bk-icon icon-mobile-shape"></span>
          <span class="icon-text">mobile-shape</span>
        </li>
        <li class="icon-item" title="monitor-alarm">
          <span class="icon-wrapper bk-icon icon-monitor-alarm"></span>
          <span class="icon-text">monitor-alarm</span>
        </li>
        <li class="icon-item" title="monitor-dashboard">
          <span class="icon-wrapper bk-icon icon-monitor-dashboard"></span>
          <span class="icon-text">monitor-dashboard</span>
        </li>
        <li class="icon-item" title="monitor-list">
          <span class="icon-wrapper bk-icon icon-monitor-list"></span>
          <span class="icon-text">monitor-list</span>
        </li>
        <li class="icon-item" title="monitor-log">
          <span class="icon-wrapper bk-icon icon-monitor-log"></span>
          <span class="icon-text">monitor-log</span>
        </li>
        <li class="icon-item" title="monitor-metric">
          <span class="icon-wrapper bk-icon icon-monitor-metric"></span>
          <span class="icon-text">monitor-metric</span>
        </li>
        <li class="icon-item" title="monitor-notice">
          <span class="icon-wrapper bk-icon icon-monitor-notice"></span>
          <span class="icon-text">monitor-notice</span>
        </li>
        <li class="icon-item" title="monitor-rule">
          <span class="icon-wrapper bk-icon icon-monitor-rule"></span>
          <span class="icon-text">monitor-rule</span>
        </li>
        <li class="icon-item" title="monitor-shield">
          <span class="icon-wrapper bk-icon icon-monitor-shield"></span>
          <span class="icon-text">monitor-shield</span>
        </li>
        <li class="icon-item" title="monitors-cog">
          <span class="icon-wrapper bk-icon icon-monitors-cog"></span>
          <span class="icon-text">monitors-cog</span>
        </li>
        <li class="icon-item" title="monitors">
          <span class="icon-wrapper bk-icon icon-monitors"></span>
          <span class="icon-text">monitors</span>
        </li>
        <li class="icon-item" title="more">
          <span class="icon-wrapper bk-icon icon-more"></span>
          <span class="icon-text">more</span>
        </li>
        <li class="icon-item" title="move">
          <span class="icon-wrapper bk-icon icon-move"></span>
          <span class="icon-text">move</span>
        </li>
        <li class="icon-item" title="my-approve">
          <span class="icon-wrapper bk-icon icon-my-approve"></span>
          <span class="icon-text">my-approve</span>
        </li>
        <li class="icon-item" title="my-perm">
          <span class="icon-wrapper bk-icon icon-my-perm"></span>
          <span class="icon-text">my-perm</span>
        </li>
        <li class="icon-item" title="my-project">
          <span class="icon-wrapper bk-icon icon-my-project"></span>
          <span class="icon-text">my-project</span>
        </li>
        <li class="icon-item" title="my-resource">
          <span class="icon-wrapper bk-icon icon-my-resource"></span>
          <span class="icon-text">my-resource</span>
        </li>
        <li class="icon-item" title="namespace">
          <span class="icon-wrapper bk-icon icon-namespace"></span>
          <span class="icon-text">namespace</span>
        </li>
        <li class="icon-item" title="next-shape">
          <span class="icon-wrapper bk-icon icon-next-shape"></span>
          <span class="icon-text">next-shape</span>
        </li>
        <li class="icon-item" title="next">
          <span class="icon-wrapper bk-icon icon-next"></span>
          <span class="icon-text">next</span>
        </li>
        <li class="icon-item" title="notification">
          <span class="icon-wrapper bk-icon icon-notification"></span>
          <span class="icon-text">notification</span>
        </li>
        <li class="icon-item" title="order-shape">
          <span class="icon-wrapper bk-icon icon-order-shape"></span>
          <span class="icon-text">order-shape</span>
        </li>
        <li class="icon-item" title="operate-audit">
          <span class="icon-wrapper bk-icon icon-operate-audit"></span>
          <span class="icon-text">operate-audit</span>
        </li>
        <li class="icon-item" title="order">
          <span class="icon-wrapper bk-icon icon-order"></span>
          <span class="icon-text">order</span>
        </li>
        <li class="icon-item" title="panel-permission">
          <span class="icon-wrapper bk-icon icon-panel-permission"></span>
          <span class="icon-text">panel-permission</span>
        </li>
        <li class="icon-item" title="panel">
          <span class="icon-wrapper bk-icon icon-panel"></span>
          <span class="icon-text">panel</span>
        </li>
        <li class="icon-item" title="panel-shape">
          <span class="icon-wrapper bk-icon icon-panel-shape"></span>
          <span class="icon-text">panel-shape</span>
        </li>
        <li class="icon-item" title="panels">
          <span class="icon-wrapper bk-icon icon-panels"></span>
          <span class="icon-text">panels</span>
        </li>
        <li class="icon-item" title="password-shape">
          <span class="icon-wrapper bk-icon icon-password-shape"></span>
          <span class="icon-text">password-shape</span>
        </li>
        <li class="icon-item" title="password">
          <span class="icon-wrapper bk-icon icon-password"></span>
          <span class="icon-text">password</span>
        </li>
        <li class="icon-item" title="pause">
          <span class="icon-wrapper bk-icon icon-pause"></span>
          <span class="icon-text">pause</span>
        </li>
        <li class="icon-item" title="pc-shape">
          <span class="icon-wrapper bk-icon icon-pc-shape"></span>
          <span class="icon-text">pc-shape</span>
        </li>
        <li class="icon-item" title="pipeline-shape">
          <span class="icon-wrapper bk-icon icon-pipeline-shape"></span>
          <span class="icon-text">pipeline-shape</span>
        </li>
        <li class="icon-item" title="pipeline">
          <span class="icon-wrapper bk-icon icon-pipeline"></span>
          <span class="icon-text">pipeline</span>
        </li>
        <li class="icon-item" title="play-shape">
          <span class="icon-wrapper bk-icon icon-play-shape"></span>
          <span class="icon-text">play-shape</span>
        </li>
        <li class="icon-item" title="play-circle-shape">
          <span class="icon-wrapper bk-icon icon-play-circle-shape"></span>
          <span class="icon-text">play-circle-shape</span>
        </li>
        <li class="icon-item" title="play">
          <span class="icon-wrapper bk-icon icon-play"></span>
          <span class="icon-text">play</span>
        </li>
        <li class="icon-item" title="play2">
          <span class="icon-wrapper bk-icon icon-play2"></span>
          <span class="icon-text">play2</span>
        </li>
        <li class="icon-item" title="play3">
          <span class="icon-wrapper bk-icon icon-play3"></span>
          <span class="icon-text">play3</span>
        </li>
        <li class="icon-item" title="plus-circle-shape">
          <span class="icon-wrapper bk-icon icon-plus-circle-shape"></span>
          <span class="icon-text">plus-circle-shape</span>
        </li>
        <li class="icon-item" title="plus-circle">
          <span class="icon-wrapper bk-icon icon-plus-circle"></span>
          <span class="icon-text">plus-circle</span>
        </li>
        <li class="icon-item" title="plus-square-shape">
          <span class="icon-wrapper bk-icon icon-plus-square-shape"></span>
          <span class="icon-text">plus-square-shape</span>
        </li>
        <li class="icon-item" title="plus">
          <span class="icon-wrapper bk-icon icon-plus"></span>
          <span class="icon-text">plus</span>
        </li>
        <li class="icon-item" title="plus-square">
          <span class="icon-wrapper bk-icon icon-plus-square"></span>
          <span class="icon-text">plus-square</span>
        </li>
        <li class="icon-item" title="project">
          <span class="icon-wrapper bk-icon icon-project"></span>
          <span class="icon-text">project</span>
        </li>
        <li class="icon-item" title="pz-config">
          <span class="icon-wrapper bk-icon icon-pz-config"></span>
          <span class="icon-text">pz-config</span>
        </li>
        <li class="icon-item" title="qq-shape">
          <span class="icon-wrapper bk-icon icon-qq-shape"></span>
          <span class="icon-text">qq-shape</span>
        </li>
        <li class="icon-item" title="question-circle-shape">
          <span class="icon-wrapper bk-icon icon-question-circle-shape"></span>
          <span class="icon-text">question-circle-shape</span>
        </li>
        <li class="icon-item" title="qq">
          <span class="icon-wrapper bk-icon icon-qq"></span>
          <span class="icon-text">qq</span>
        </li>
        <li class="icon-item" title="question-circle">
          <span class="icon-wrapper bk-icon icon-question-circle"></span>
          <span class="icon-text">question-circle</span>
        </li>
        <li class="icon-item" title="question">
          <span class="icon-wrapper bk-icon icon-question"></span>
          <span class="icon-text">question</span>
        </li>
        <li class="icon-item" title="refresh">
          <span class="icon-wrapper bk-icon icon-refresh"></span>
          <span class="icon-text">refresh</span>
        </li>
        <li class="icon-item" title="right-shape">
          <span class="icon-wrapper bk-icon icon-right-shape"></span>
          <span class="icon-text">right-shape</span>
        </li>
        <li class="icon-item" title="rtx">
          <span class="icon-wrapper bk-icon icon-rtx"></span>
          <span class="icon-text">rtx</span>
        </li>
        <li class="icon-item" title="save-shape">
          <span class="icon-wrapper bk-icon icon-save-shape"></span>
          <span class="icon-text">save-shape</span>
        </li>
        <li class="icon-item" title="save">
          <span class="icon-wrapper bk-icon icon-save"></span>
          <span class="icon-text">save</span>
        </li>
        <li class="icon-item" title="script-file">
          <span class="icon-wrapper bk-icon icon-script-file"></span>
          <span class="icon-text">script-file</span>
        </li>
        <li class="icon-item" title="script-files">
          <span class="icon-wrapper bk-icon icon-script-files"></span>
          <span class="icon-text">script-files</span>
        </li>
        <li class="icon-item" title="search">
          <span class="icon-wrapper bk-icon icon-search"></span>
          <span class="icon-text">search</span>
        </li>
        <li class="icon-item" title="sina-shape">
          <span class="icon-wrapper bk-icon icon-sina-shape"></span>
          <span class="icon-text">sina-shape</span>
        </li>
        <li class="icon-item" title="sina">
          <span class="icon-wrapper bk-icon icon-sina"></span>
          <span class="icon-text">sina</span>
        </li>
        <li class="icon-item" title="sitemap-shape">
          <span class="icon-wrapper bk-icon icon-sitemap-shape"></span>
          <span class="icon-text">sitemap-shape</span>
        </li>
        <li class="icon-item" title="smile-shape">
          <span class="icon-wrapper bk-icon icon-smile-shape"></span>
          <span class="icon-text">smile-shape</span>
        </li>
        <li class="icon-item" title="sitemap">
          <span class="icon-wrapper bk-icon icon-sitemap"></span>
          <span class="icon-text">sitemap</span>
        </li>
        <li class="icon-item" title="smile">
          <span class="icon-wrapper bk-icon icon-smile"></span>
          <span class="icon-text">smile</span>
        </li>
        <li class="icon-item" title="sort">
          <span class="icon-wrapper bk-icon icon-sort"></span>
          <span class="icon-text">sort</span>
        </li>
        <li class="icon-item" title="star-shape">
          <span class="icon-wrapper bk-icon icon-star-shape"></span>
          <span class="icon-text">star-shape</span>
        </li>
        <li class="icon-item" title="star">
          <span class="icon-wrapper bk-icon icon-star"></span>
          <span class="icon-text">star</span>
        </li>
        <li class="icon-item" title="stop">
          <span class="icon-wrapper bk-icon icon-stop"></span>
          <span class="icon-text">stop</span>
        </li>
        <li class="icon-item" title="stop-shape">
          <span class="icon-wrapper bk-icon icon-stop-shape"></span>
          <span class="icon-text">stop-shape</span>
        </li>
        <li class="icon-item" title="templateset">
          <span class="icon-wrapper bk-icon icon-templateset"></span>
          <span class="icon-text">templateset</span>
        </li>
        <li class="icon-item" title="tree-application-shape">
          <span class="icon-wrapper bk-icon icon-tree-application-shape"></span>
          <span class="icon-text">tree-application-shape</span>
        </li>
        <li class="icon-item" title="tree-application">
          <span class="icon-wrapper bk-icon icon-tree-application"></span>
          <span class="icon-text">tree-application</span>
        </li>
        <li class="icon-item" title="tree-group">
          <span class="icon-wrapper bk-icon icon-tree-group"></span>
          <span class="icon-text">tree-group</span>
        </li>
        <li class="icon-item" title="tree-group-shape">
          <span class="icon-wrapper bk-icon icon-tree-group-shape"></span>
          <span class="icon-text">tree-group-shape</span>
        </li>
        <li class="icon-item" title="tree-module-shape">
          <span class="icon-wrapper bk-icon icon-tree-module-shape"></span>
          <span class="icon-text">tree-module-shape</span>
        </li>
        <li class="icon-item" title="tree-module">
          <span class="icon-wrapper bk-icon icon-tree-module"></span>
          <span class="icon-text">tree-module</span>
        </li>
        <li class="icon-item" title="tree-process-shape">
          <span class="icon-wrapper bk-icon icon-tree-process-shape"></span>
          <span class="icon-text">tree-process-shape</span>
        </li>
        <li class="icon-item" title="tree-process">
          <span class="icon-wrapper bk-icon icon-tree-process"></span>
          <span class="icon-text">tree-process</span>
        </li>
        <li class="icon-item" title="un-full-screen">
          <span class="icon-wrapper bk-icon icon-un-full-screen"></span>
          <span class="icon-text">un-full-screen</span>
        </li>
        <li class="icon-item" title="unlock-shape">
          <span class="icon-wrapper bk-icon icon-unlock-shape"></span>
          <span class="icon-text">unlock-shape</span>
        </li>
        <li class="icon-item" title="unlock">
          <span class="icon-wrapper bk-icon icon-unlock"></span>
          <span class="icon-text">unlock</span>
        </li>
        <li class="icon-item" title="up-shape">
          <span class="icon-wrapper bk-icon icon-up-shape"></span>
          <span class="icon-text">up-shape</span>
        </li>
        <li class="icon-item" title="upload">
          <span class="icon-wrapper bk-icon icon-upload"></span>
          <span class="icon-text">upload</span>
        </li>
        <li class="icon-item" title="user-list-detail">
          <span class="icon-wrapper bk-icon icon-user-list-detail"></span>
          <span class="icon-text">user-list-detail</span>
        </li>
        <li class="icon-item" title="user-shape">
          <span class="icon-wrapper bk-icon icon-user-shape"></span>
          <span class="icon-text">user-shape</span>
        </li>
        <li class="icon-item" title="user">
          <span class="icon-wrapper bk-icon icon-user"></span>
          <span class="icon-text">user</span>
        </li>
        <li class="icon-item" title="var">
          <span class="icon-wrapper bk-icon icon-var"></span>
          <span class="icon-text">var</span>
        </li>
        <li class="icon-item" title="weixin">
          <span class="icon-wrapper bk-icon icon-weixin"></span>
          <span class="icon-text">weixin</span>
        </li>
        <li class="icon-item" title="weixin-shape">
          <span class="icon-wrapper bk-icon icon-weixin-shape"></span>
          <span class="icon-text">weixin-shape</span>
        </li>
        <li class="icon-item" title="wl-network">
          <span class="icon-wrapper bk-icon icon-wl-network"></span>
          <span class="icon-text">wl-network</span>
        </li>
        <li class="icon-item" title="work-manage">
          <span class="icon-wrapper bk-icon icon-work-manage"></span>
          <span class="icon-text">work-manage</span>
        </li>
        <li class="icon-item" title="yy-apply">
          <span class="icon-wrapper bk-icon icon-yy-apply"></span>
          <span class="icon-text">yy-apply</span>
        </li>
        <li class="icon-item" title="zy-resource">
          <span class="icon-wrapper bk-icon icon-zy-resource"></span>
          <span class="icon-text">zy-resource</span>
        </li>
      </ul>
    </section>

    <h2>为什么使用</h2>
    <section class="section">
      <p>- 弹性，在网页或者 app 上，展示字体是很便捷的。用 字体图标 可以很方便的改变 icon 的颜色，或者加入一些其他的效果</p>
      <p>- 可缩放，可以很方便的改变图标的大小</p>
      <p>- 矢量，字体图标 是矢量的并且具有独立的分辨率，不管在高分辨率还是低分辨率，不管是在网页还是手机端，都具有很好的展示效果，不会出现锯齿或者马赛克模糊</p>
      <p>- 节省加载时间，字体图标 很小，每个小图标只有几 kb，大大节省了加载时间</p>
    </section>

    <h2>如何使用</h2>
    <section class="section">
      <p>- 将整个目录复制到您的项目里</p>
      <p>- 引入style.css</p>
      <p>- 挑选相应图标并获取类名，如.bk-icon .icon-demo</p>
    </section>
  </div>
</body>
</html>